<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="showDialog"
    :title="title"
    :destroy-on-close="true"
    @close="onCloseDialog"
    width="50%"
  >
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="基本信息" name="essentialInfo">
        <el-form
          :model="formTerminalPosData"
          :rules="rulesTerminalPos"
          ref="formTerminalPosData"
          label-width="100px"
        >
          <el-form-item label="设备名称">
            <el-input
              v-model="formTerminalPosData.deviceName"
              placeholder="设备名称"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select
              v-model="formTerminalPosData.deviceTypeId"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in deviceTypeList"
                :key="item.id"
                :label="item.deviceTypeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="自动更新">
            <el-switch v-model="isUpgrade" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>

          <el-form-item label="是否启用">
            <el-switch v-model="isStatus" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="devicePosInfoUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="其他设置" name="otherSettings">
        <el-form
          :model="formTerminalData"
          ref="formTerminalData"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="POS机后台密码" label-width="120px">
            <el-input
              type="password"
              v-model="formTerminalData.sysDevicePosOtherSetVO.backstageDefaultPwd"
              placeholder="POS机后台密码"
              clearable
              size="small"
            />
          </el-form-item>
          <br />
          <el-form-item label="会员办卡" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isMembershipCard"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="快速收款" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isQuickCollection"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="门票核销" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isTicketWriteOff"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="会员查询" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isMemberQuery"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="会员扣值" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isMemberDeduction"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="会员充值" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isMemberRecharge"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="车管理" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isKartConsumption"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="车消费" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isKartconsume"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="车转移" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isKartTransfer"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <!--                          <el-form-item label="实物产品" style="width: 30%;">-->
          <!--                              <el-switch-->
          <!--                                  v-model="formTerminalData.sysDevicePosOtherSetVO.isPhysicalproduct"-->
          <!--                                  active-color="#13ce66"-->
          <!--                                  inactive-color="#ff4949">-->
          <!--                              </el-switch>-->
          <!--                          </el-form-item>-->

          <!--                          <el-form-item label="服务产品" style="width: 30%;">-->
          <!--                              <el-switch-->
          <!--                                  v-model="formTerminalData.sysDevicePosOtherSetVO.isServiceproduct"-->
          <!--                                  active-color="#13ce66"-->
          <!--                                  inactive-color="#ff4949">-->
          <!--                              </el-switch>-->
          <!--                          </el-form-item>-->

          <el-form-item label="会员注册" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isMemberRegister"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="商品销售" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isGoodsSales"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="门票销售" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isTicketSales"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="商品兑换" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isGoodsExchange"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="组合套餐" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isProductPackage"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="抖音核销" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isTiktokWriteOff"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="美团核销" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isMeiTuanWriteOff"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="代币销售" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isCoinsSales"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
        </el-form>

        <el-form
          :model="formTerminalData"
          ref="formTerminalData"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="自定义充值" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.isCustomRecharge"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
        </el-form>

        <el-form
          :model="formTerminalData"
          ref="formTerminalData"
          :inline="true"
          label-width="100px"
        >
          <div>会员变更</div>
          <el-form-item label="绑卡" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.cardServer.isCardDinding"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="解绑" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.cardServer.isUnbinding"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="挂失" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.cardServer.isReportTheLoss"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="解挂" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.cardServer.isUnhook"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="冻结" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.cardServer.isFrozen"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="解冻" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.cardServer.isThaw"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="卡续期" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.cardServer.isCardRenewal"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="修改密码" style="width: 30%">
            <el-switch
              v-model="formTerminalData.sysDevicePosOtherSetVO.cardServer.isChangePassword"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="configureUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="支付方式设置" name="payMethodSettings">
        <div>
          <div style="margin-top: 20px">
            <el-checkbox-group v-model="payModecheckboxGroup">
              <span
                v-for="(payMode, index) in formTerminalData.sysDevicePosOtherSetVO.payModeList"
                :key="payMode.payType"
              >
                <el-divider v-if="index % 2 == 0" />
                <el-checkbox :value="payMode.payType" :label="payMode.payName"
                  >{{ payMode.payName }}
                </el-checkbox>
              </span>
            </el-checkbox-group>
          </div>
        </div>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="configureUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import { deviceAction } from '@/api/device/device.js';
  import { deviceTypeList } from '@/api/device/type.js';
  import { ElMessage } from 'element-plus';

  export default {
    name: 'DialogPosTerminal',
    props: {
      dialog: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '终端设置',
      },
      deviceId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        payModecheckboxGroup: [],
        activeName: 'essentialInfo',
        // showDialog: false,
        isUpgrade: true,
        isStatus: true,
        formTerminalPosData: {
          payModecheckboxGroup: [],
          sysDevicePosOtherSetVO: {
            cardServer: {},
          },
        },
        formTerminalData: {
          sysDevicePosOtherSetVO: {
            cardServer: {},
          },
          insertcoinspulsespace: 0,
          insertcoinssignallevel: '0',
          insertcoinspulsewidth: 0,
          c1insertcoinspulsecount: 0,
          pattern: 0,
          settingList: undefined,
          payModecheckboxGroup: [],
        },
        terminalPos: {
          insertcoinspulsespace: 0,
          insertcoinssignallevel: '0',
          insertcoinspulsewidth: 0,
          c1insertcoinspulsecount: 0,
          pattern: 0,
        },
        deviceTypeList: [],
        rulesTerminalPos: {
          deviceName: [{ required: true, message: '设备名称不可为空！', trigger: 'blur' }],
        },
      };
    },
    computed: {
      showDialog() {
        return this.dialog;
      },
    },
    watch: {},
    created() {
      this.getDevicePosDetails();
      //设备类型列表
      deviceTypeList({}).then((res) => {
        this.deviceTypeList = res;
      });
    },
    methods: {
      // 表单重置
      reset() {},
      //终端设置
      getDevicePosDetails() {
        deviceAction('POS', 'getDevicePosDetails', this.deviceId).then((response) => {
          this.formTerminalData = response;
          this.formTerminalPosData = response;
          this.payModecheckboxGroup = response.payModecheckboxGroup;
          if (this.formTerminalPosData.isStatus == 1) {
            this.isStatus = false;
          }
          if (this.formTerminalPosData.isUpgrade == 0) {
            this.isUpgrade = false;
          }
        });
      },
      //设备信息修改
      devicePosInfoUpdate() {
        this.formTerminalPosData.isStatus = this.isStatus == true ? 0 : 1;
        this.formTerminalPosData.isUpgrade = this.isUpgrade == true ? 1 : 0;
        deviceAction('DEVICE', 'updateDevice', this.formTerminalPosData).then((response) => {
          if (response) {
            ElMessage({
              message: '操作成功！',
              type: 'success',
            });
            this.$emit('submit');
          } else {
            ElMessage({
              message: response.msg,
              type: 'error',
            });
          }
        });
      },
      //参数修改
      configureUpdate() {
        this.formTerminalData.payModecheckboxGroup = this.payModecheckboxGroup;
        deviceAction('POS', 'getDevicePosSetOtherInfoUpdate', this.formTerminalData).then(
          (response) => {
            if (response) {
              ElMessage({
                message: '操作成功！',
                type: 'success',
              });
              this.$emit('submit');
            } else {
              ElMessage({
                message: response.msg,
                type: 'error',
              });
            }
          },
        );
      },
      //4G盒子配置下发
      issueConfigure() {
        deviceAction('BOX', 'issueConfigure', this.deviceId).then((response) => {
          if (response) {
            if (response) {
              ElMessage({
                message: '执行成功！',
                type: 'success',
              });
            } else {
              ElMessage({
                message: response.msg,
                type: 'error',
              });
            }
          } else {
            ElMessage({
              message: '执行失败！',
              type: 'error',
            });
          }
        });
      },
      onCloseDialog() {
        this.$emit('close');
      },
    },
  };
</script>

<style scoped></style>
